<template>
	<div class="card-box sex-box">
		<card-title title="各类上岗成员性别统计"></card-title>
		<div class="ratio-box">
			<div class="man-item" v-for="(item, i) in sexList" :key="i">
				<div class="icon-ratio">
					<div class="icon">
						<img :src="item.icon" class="image" alt="" />
					</div>
					<div class="ratio">
						<div class="num">{{ item.val3 }}</div>
						<div class="des">{{ item.val1 }}</div>
					</div>
				</div>
				<div class="humans">{{ item.val2 }}人</div>
			</div>
		</div>
	</div>
</template>

<script setup>
const sexList = [
    {
        icon: new URL("../../assets/images/home/man.png", import.meta.url).href,
        val3: '51.1%',
        val1: '男性占比',
        val2: 151
    },
    {
        icon: new URL("../../assets/images/home/woman.png", import.meta.url).href,
        val3: '48.9%',
        val1: '女性占比',
        val2: 158
    }
]

</script>

<style scoped lang="scss">
@import "../../assets/css/common.scss";
.sex-box {
	height: 246px;
    margin-top: 14px;
	.ratio-box {
		padding: 40px 0;
		display: flex;
		align-items: center;
		margin-left: -20px;

		.man-item {
			flex:1;
			font-size: 18px;
			margin-left: 20px;
			.icon-ratio {
				display: flex;
				align-items: center;
				height: 97px;
				width: 97px;
				.icon {
					width: 100%;
					height: 100%;
				}
				.ratio {
					margin-left: 5px;
					height: 100%;
					padding: 10px 0;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.num {
						font-size: 30px;
					}
				}
			}
			.humans {
				margin-top: 10px;
				width: 98px;
				text-align: center;
			}
		}
	}
}
</style>
